<template>
  <view class="hot-box">
    <view class="hot-title">
      热搜榜
    </view>

    <!-- 热搜主体 -->
    <view class="hot-body">
      <!-- 热搜条目 -->
      <view class="hot-item"
            v-for="(item, index) in data"
            :key="index"
            @click="$emit('hot-click', item.searchWord)">
        <view class="index"
              :class="{red: index < 3}">
          {{index + 1}}
        </view>
        <view class="hot-item-body">
          <view class="hot-title">
            {{item.searchWord}}
            <i v-if="item.iconType === 1">HOT</i>
          </view>
          <view class="hot-info">{{item.content}}</view>
        </view>

        <view class="hot-count">
          {{item.score}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      data: {
        type: Array,
        default: () => []
      }
    }
  }
</script>

<style lang="scss"
       scoped>
  .hot-box {
    margin: 0 30rpx;
    font-size: 26rpx;

    .hot-title {}

    .hot-body {
      .hot-item {
        height: 70rpx;
        padding: 30rpx 0;
        display: flex;
        align-items: center;

        .index {
          width: 60rpx;
          margin-left: 8rpx;

          &.red {
            color: #fb2222;
          }
        }

        .hot-item-body {
          flex: 1;
          display: flex;
          flex-direction: column;

          .hot-title {
            display: flex;
            align-items: center;
            font-size: 30rpx;

            i {
              font-size: 26rpx;
              margin-left: 10rpx;
              color: #d16058;
              font-weight: 900;
            }
          }

          .hot-info {
            font-size: 24rpx;
            color: #878787;
          }
        }

        .hot-count {
          font-size: 26rpx;
          color: #878787;
        }
      }
    }
  }
</style>
